import React, { useState, useEffect } from 'react'
// 引入需要热替换的模块
const title = require("./webpackHMRModule.js")



function WebpackHMR() {
    const [state, setState] = useState(title)

    useEffect(() => {
        // module.hot 上有多个方法可供调用；
        // module.hot.accept 方法告诉 Home.js 依赖了谁，依赖的模块发生变更后会告知客户端
        if (module.hot) {
            module.hot.accept(['./webpackHMRModule.js'], data => {
                console.log("webpackHMRModule.js 更新了：", data)
                const newTitle = require("./webpackHMRModule.js")
                // 可以在此 setState()，然后重新 render()   
                setState(newTitle)
            })
        }
  
    }, [state])
    return (
        <div>
            <div>WebpackHMR：{state}</div>
            <div><input placeholder="输入内容，HMR不会刷新该内容！"></input></div>
        </div>
    )
}

export default WebpackHMR
